<!-- 考情记录页面 -->
<template>
  <div class=''>

    <el-card style="width: 95%; margin: 0 auto;"
             shadow="never">
      <el-alert title="提示：请先输入会员卡号查询会员信息"
                type="warning"
                :closable="false">
      </el-alert>
      <el-row style="margin-top: 15px;">
        <el-col :span="4">
          &nbsp;
        </el-col>
        <el-col :span="20">
          <el-input style="width: 500px; margin-right: 10px;"
                    v-model="dataForm.cardNumber"
                    maxlength="10"
                    placeholder="请输入会员卡号"
                    @keyup.enter.native="getMember"
                    size="max"
                    clearable
                    @clear="clearHandle"
                    v-fo>
            <template slot="prepend">
              <!-- <el-button style="background: #FED751;">会员刷卡</el-button> -->
              会员刷卡
            </template>
            <el-button slot="append"
                       icon="el-icon-search"
                       @click="getMember"></el-button>
          </el-input>
          <el-button type="primary"
                     @click="confirmAttenHandle"
                     size="max"
                     :disabled="dkBtnDisable"
                     v-if="isAuth('member:attendance:dk')">立即打卡</el-button>
          <!-- <div class="el-form-item__error"
               style="text-align:center">会员卡不存在，请确认后在</div> -->
        </el-col>
      </el-row>
    </el-card>
    <el-row :gutter="0"
            style="width: 95%; margin: 30px auto; 0">
      <!-- <el-col :span="5">
        <div class="grid-content bg-purple">
          <el-row type="flex"
                  style="padding: 20px 20px 0 20px; height:145px">
            <img :src="url"
                 style="width:100px; height: 100px; margin: 10px auto; border-radius: 150px">
          </el-row>
          <el-row style="text-align: center">
            <el-tag effect="dark"
                    type="warning">
              黄金会员
            </el-tag>
          </el-row>
        </div>
      </el-col> -->
      <el-col :span="24">
        <div>
          <table style="border-left: 1px solid #e5e9f2;">
            <tr>
              <td>会员姓名</td>
              <td>{{dataForm.name}}</td>
              <td>联系电话</td>
              <td>{{dataForm.telphone}}</td>
            </tr>
            <tr>
              <td>会员类型</td>
              <td>{{dataForm.cardTypeName}}</td>
              <td>累计考勤</td>
              <td>{{dataForm.totalAttda}}次</td>
            </tr>
            <tr>
              <td>卡内余额</td>
              <td>
                <!--￥{{dataForm.balance}}-->此功能暂未开通
              </td>
              <td>剩余次数</td>
              <td>{{dataForm.usage}}次</td>
            </tr>
            <tr>
              <td>开卡时间</td>
              <td>{{dataForm.createdTime}}</td>
              <td>卡到期时间</td>
              <td>{{dataForm.expDate | formatDate}}</td>
            </tr>
            <tr>
              <td>上次来访</td>
              <td>{{dataForm.lastVisit}}</td>
              <td>联系电话</td>
              <td>{{dataForm.telphone}}</td>
            </tr>
          </table>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="30"
            style="width: 97%; margin: 0px auto; 0px;">
      <el-col :span="12">
        <h3><i class="el-icon-s-promotion"></i> 考勤记录</h3>
        <el-table border
                  stripe
                  size="small"
                  :data="dataList"
                  v-loading="dataListLoading">
          <el-table-column label="#"
                           width="60"
                           prop="id"
                           header-align="center"
                           align="center"></el-table-column>
          <el-table-column label="考勤时间"
                           prop="punchTime"
                           header-align="center"
                           align="center">
            <template slot-scope="scope">
              {{scope.row.punchTime | formatDate}}
            </template>
          </el-table-column>
          <el-table-column label="操作人"
                           width="110"
                           prop="createdBy"
                           header-align="center"
                           align="center"></el-table-column>
        </el-table>
        <el-pagination @size-change="sizeChangeHandle"
                       @current-change="currentChangeHandle"
                       :current-page="pageIndex"
                       :page-size="pageSize"
                       :total="totalPage"
                       background
                       layout="total, prev, pager, next">
        </el-pagination>
      </el-col>
      <el-col :span="12">
        <div>
          <h3><i class="el-icon-s-custom"></i> 会员照片信息</h3>
          <div style="border: 1px solid #e5e9f2; text-align: center; padding: 20px 30px;">
            <img :src="dataForm.avatar || url"
                 style="width: 278px; border-radius: 10px; margin: 0 auto; opacity: 1;">
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { formatDate } from '@/utils/date'

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      url: 'http://localhost:88/api/member/upload/20201013/default.png',
      dkBtnDisable: true,
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataForm: {
        cardId: '',
        memberId: '',
        cardNumber: '',
        name: '',
        cardTypeId: '',
        cardTypeName: '',
        balance: '',
        usage: '',
        createdTime: '',
        expDate: '',
        totalAttda: '',
        lastVisit: '',
        telphone: '',
        avatar: ''
      }
    }
  },
  filters: {
    formatDate (time, format = 'yyyy-MM-dd hh:mm:ss') {
      var date = new Date(time * 1000)
      return formatDate(date, format)
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    init () {

    },
    getMember (flag = 0) {
      // 判断会员卡是否为空
      if (!this.dataForm.cardNumber) {
        this.$alert('请输入会员卡号', '系统提示', {
          confirmButtonText: '确定',
          type: 'warning',
          showClose: false
        })
        return !1
      }

      this.$http({
        url: this.$http.adornUrl(`/member/attendance/selectMember/${this.dataForm.cardNumber}`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          if (!data.data) {
            this.$alert('会员卡不存在，请确认后再查询', '系统提示', {
              confirmButtonText: '确定',
              type: 'warning',
              showClose: false
            })
            return !1
          }
          this.dataForm.cardId = data.data.cardId
          this.dataForm.memberId = data.data.memberId
          this.dataForm.cardNumber = data.data.cardNumber
          this.dataForm.name = data.data.name
          this.dataForm.cardTypeId = data.data.cardTypeId
          this.dataForm.cardTypeName = data.data.cardTypeName
          this.dataForm.balance = data.data.balance
          this.dataForm.usage = data.data.usage
          this.dataForm.createdTime = data.data.createdTime
          this.dataForm.expDate = data.data.expDate
          this.dataForm.totalAttda = data.data.totalAttda
          this.dataForm.lastVisit = data.data.lastVisit
          this.dataForm.telphone = data.data.telphone
          this.dataForm.avatar = data.data.avatar

          // 加载打卡记录
          this.pageIndex = 1
          this.totalPage = 0

          // if (flag === 0) {
          //   this.dkBtnDisable = false
          // }
          // console.log(`flag=${flag}`)
          this.dkBtnDisable = false

          this.getDataList()
        }
      })
    },
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/member/attendance/list'),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'limit': this.pageSize,
          'memberId': this.dataForm.memberId
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list
          this.totalPage = data.page.totalCount
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 多选
    selectionChangeHandle (val) {
      this.dataListSelections = val
    },
    // 确认考勤
    confirmAttenHandle () {
      this.$confirm('记录考勤, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.dataFormSubmit()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消打卡'
        })
      })
    },
    // 表单提交
    dataFormSubmit () {
      this.$http({
        url: this.$http.adornUrl(`/member/attendance/save`),
        method: 'post',
        data: this.$http.adornData({
          'cardId': this.dataForm.cardId,
          'cardNumber': this.dataForm.cardNumber,
          'cardTypeId': this.dataForm.cardTypeId,
          'cardTypeName': this.dataForm.cardTypeName,
          'memberId': this.dataForm.memberId,
          'memberName': this.dataForm.name,
          'createdBy': this.$store.state.user.name
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: '打卡成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              // 再次加载会员信息
              this.getMember(99)
            }
          })
        } else {
          // this.$message.error(data.msg)
          this.$alert(data.msg, '温馨提示', {
            confirmButtonText: '确定'
          })
        }
      })
    },
    // 重置
    resetValue () {
      for (var item in this.dataForm) {
        this.dataForm[item] = ''
      }
      this.dkBtnDisable = true
      this.dataList = []
      this.pageIndex = 1
      this.pageSize = 10
      this.totalPage = 0
      this.dataListLoading = false
    },
    clearHandle () {
      this.resetValue()
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
// @import url(); 引入公共css类
.el-col {
  // border-radius: 0px;
}
.bg-purple-dark {
  // background: #99a9bf;
}
.bg-purple {
  // background: #d3dce6;
}
.bg-purple-light {
  // background: #e5e9f2;
}
.grid-content {
  // border-radius: 0px;
  // min-height: 202px;
  // border: 1px solid #e5e9f2;
}
.grid-col {
  // text-align: right;
}
table {
  width: 100%;
  border-top: 1px solid #e5e9f2;
  // border-left: 1px solid #e5e9f2;
  border-spacing: 0; /*去掉单元格间隙*/
}

table td {
  padding: 10px 15px;
  border-bottom: 1px solid #e5e9f2;
  border-right: 1px solid #e5e9f2;
}

table td:nth-child(1),
table td:nth-child(3),
table td:nth-child(5) {
  text-align: right;
  width: 11%;
  padding: 10px 10px;
  background: #f9fafc;
}

h3 {
  font-weight: 400 !important;
  color: #606266;
  font-size: 18px;
}
</style>